  <template>
    <div class="ai-chat-wrapper">
      <!-- 顶部栏 -->
      <div class="ai-chat-header">
        <span class="ai-chat-title">AI助手</span>
      </div>
      <!-- 消息列表 -->
      <div class="ai-chat-messages" ref="messagesContainer">
        <div v-for="(message, index) in chatMessages" :key="index" class="ai-chat-message-row"
          :class="message.role === 'user' ? 'ai-chat-message-row-user' : 'ai-chat-message-row-bot'">
          <img :src="message.role === 'user' ? userAvatar : botAvatar" alt="Avatar" class="ai-chat-avatar">
          <div class="ai-chat-bubble" :class="message.role === 'user' ? 'ai-chat-bubble-user' : 'ai-chat-bubble-bot'">
            <p class="ai-chat-bubble-text">{{ message.content }}</p>
          </div>
        </div>
        <!-- 加载状态 -->
        <div v-if="loading" class="ai-chat-message-row ai-chat-message-row-bot">
          <img :src="botAvatar" alt="Bot Avatar" class="ai-chat-avatar" />
          <div class="ai-chat-bubble ai-chat-bubble-bot">
            <el-skeleton :rows="1" animated />
          </div>
        </div>
      </div>
      <!-- 输入区域 -->
      <div class="ai-chat-input-area">
        <el-input
        v-model="userInput"
        type="textarea"
        :autosize="{ minRows: 2, maxRows: 6 }"
        placeholder="有没一些建议，可以激发团队成员分享他们的观点想法？"
        :disabled="loading"
        @keyup.enter="handleSendMessage"
        class="ai-chat-input"
      />
      <el-button
        type="primary"
        :loading="loading"
        @click="handleSendMessage"
        class="ai-chat-send-btn"
      >
        发送
      </el-button>
        <!-- 附加按钮区（可自定义） -->
        <!-- <div class="ai-chat-extra-btns">
          <el-button icon="el-icon-picture" circle size="small" />
          <el-button icon="el-icon-folder" circle size="small" />
          <el-button icon="el-icon-more" circle size="small" />
        </div> -->
      </div>
    </div>
  </template>

<script setup lang="ts">
import { ref, computed, onMounted, nextTick, watch } from 'vue'
import { useChatStore } from '@/stores/chat'
import userAvatar from '@/assets/images/userAvatar.png'
import botAvatar from '@/assets/images/botAvatar.png'

const chatStore = useChatStore()
const userInput = ref('')
const messagesContainer = ref<HTMLElement | null>(null)

const chatMessages = computed(() => chatStore.messages)
const loading = computed(() => chatStore.loading)



const scrollToBottom = () => {
  nextTick(() => {
    if (messagesContainer.value) {
      messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight
    }
  })
}

watch(chatMessages, scrollToBottom)
onMounted(scrollToBottom)

const handleSendMessage = async () => {
  if (!userInput.value.trim() || loading.value) return
  const input = userInput.value
  userInput.value = ''
  chatStore.addMessage({ role: 'user', content: input })
  await chatStore.processUserInput(input)
  scrollToBottom()
}


</script>

<style scoped>
.ai-chat-wrapper {
  height: 98%;
  background: #fff;
  border-radius: 18px;
  border: 1.5px solid #e3d7fa;
  box-shadow: 0 4px 24px 0 rgba(120, 80, 255, 0.08);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
}

.ai-chat-header {
  background: linear-gradient(90deg, #e3d7fa 0%, #f7f0ff 100%);
  padding: 18px 24px 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #f0eaff;
}

.ai-chat-title {
  font-weight: bold;
  font-size: 18px;
  color: #7a5af8;
  letter-spacing: 1px;
}

.ai-chat-score {
  font-size: 13px;
  color: #b197fc;
}

.ai-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 18px 18px 0 18px;
  background: #f9f7fd;
}

.ai-chat-message-row {
  display: flex;
  align-items: flex-start;
  margin-bottom: 16px;
}

.ai-chat-message-row-user {
  flex-direction: row-reverse;
}

.ai-chat-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 2px 8px 0 rgba(120, 80, 255, 0.08);
}

.ai-chat-bubble {
  max-width: 75%;
  padding: 12px 16px;
  border-radius: 14px;
  box-shadow: 0 2px 8px 0 rgba(120, 80, 255, 0.06);
  font-size: 15px;
  line-height: 1.7;
  margin: 0 10px;
  word-break: break-word;
}

.ai-chat-bubble-user {
  background: linear-gradient(90deg, #e3d7fa 0%, #f7f0ff 100%);
  color: #7a5af8;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 14px;
  border-top-right-radius: 14px;
  border-top-left-radius: 14px;
}

.ai-chat-bubble-bot {
  background: #fff;
  color: #333;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 14px;
  border-top-right-radius: 14px;
  border-top-left-radius: 14px;
}

.ai-chat-bubble-text {
  margin: 0;
  white-space: pre-wrap;
}

.ai-chat-input-area {
  background: #f9f7fd;
  padding: 16px 18px 18px 18px;
  border-top: 1px solid #f0eaff;
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.ai-chat-input {
  flex: 1;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px 0 rgba(120, 80, 255, 0.04);
}

.ai-chat-send-btn {
  border-radius: 8px;
}

.ai-chat-extra-btns {
  display: flex;
  flex-direction: row;
  gap: 6px;
  margin-left: 8px;
}

::-webkit-scrollbar {
  width: 6px;
  background: #f7f0ff;
}

::-webkit-scrollbar-thumb {
  background: #e3d7fa;
  border-radius: 3px;
}
</style>